//1.柱状图
let legend_data = ["AQI", 'CO', 'NO2', 'O3', 'PM10', 'PM2.5', 'SO2'];

let myCharts_col = echarts.init(document.querySelector(".map .chart .line"))
let option_col;
option_col = {
    title: {
        // text: 'World Population'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        textStyle: {
            color: '#fff',
            fontSize: 14
        }
    },
    grid: {
        left: '2%',
        right: '5%',
        // bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01],
        axisLabel: {
            color: "#fff",
            fontSize: "14"
        },
    },
    yAxis: {
        type: 'category',
        data: legend_data,
        axisLabel: {
            color: "#fff",
            fontSize: "14"
        },
    },
    series: [
        {
            name: '杭州 1',
            type: 'bar',
            data: [53, 1, 30, 58, 55, 37, 16]
        },
        {
            name: '舟山49',
            type: 'bar',
            data: [33, 0.5, 6, 104, 33, 20, 9]
        }
    ]
};
myCharts_col.setOption(option_col);


// 2.饼图1
let myCharts_pie1 = echarts.init(document.querySelector(".diqu1"))
let option_pie1;
option_pie1 = {
    title: {
        text: '杭州1',
        textStyle: {
            color: '#fff',
            fontSize: 18
        }
    },
    tooltip: {
        trigger: 'item'
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    legend: {
        top: '0%',
        right: '10%',
        orient: 'vertical',
        // left: 'right',
        top: 'center',
        align: 'left',
        textStyle: {
            color: "rgba(255,255,255,.8)",
            fontSize: 14
        }
    },

    series: [
        {
            name: '传感器地区分布比例',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['40%', '50%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
            },
            labelLine: {
                show: true
            },
            label: {
                fontSize: 12,
                fontWeight: 'bold',
                color: '#fff',
                formatter: '{b}\n{d}%',
            },
            data: [
                { value: 53, name: 'AQI' },
                { value: 1, name: 'CO' },
                { value: 30, name: 'NO2' },
                { value: 58, name: 'O3' },
                { value: 55, name: 'PM10' },
                { value: 37, name: 'PM25' },
                { value: 16, name: 'SO2' },
            ]

        }
    ]
};
myCharts_pie1.setOption(option_pie1);


// 3.饼图2
let myCharts_pie2 = echarts.init(document.querySelector(".diqu2"))
let option_pie2;
option_pie2 = {
    title: {
        text: '舟山49',
        textStyle: {
            color: '#fff',
            fontSize: 18
        }
    },
    tooltip: {
        trigger: 'item'
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    legend: {
        top: '0%',
        right: '10%',
        orient: 'vertical',
        // left: 'right',
        top: 'center',
        align: 'left',
        textStyle: {
            color: "rgba(255,255,255,.8)",
            fontSize: 14
        }
    },
    series: [
        {
            name: '传感器地区分布比例',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['40%', '50%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
            },
            labelLine: {
                show: true
            },
            label: {
                fontSize: 12,
                fontWeight: 'bold',
                color: '#fff',
                formatter: '{b}\n{d}%',
            },
            data: [
                { value: 33, name: 'AQI' },
                { value: 0.5, name: 'CO' },
                { value: 6, name: 'NO2' },
                { value: 104, name: 'O3' },
                { value: 33, name: 'PM10' },
                { value: 20, name: 'PM25' },
                { value: 9, name: 'SO2' },
            ]

        }
    ]
};
myCharts_pie2.setOption(option_pie2);

// 图标跟随屏幕自适应
window.addEventListener("resize", function () {
    myCharts_col.resize();
    myCharts_pie1.resize();
    myCharts_pie2.resize();
})

//日历组件
laydate.render({
    elem: '#selectTime', //指定元素
    type: 'datetime',
});
//站点选择
const city = {
    hz: [1, 2, 5, 6, 7, 8, 9, 10, 11, 12, 13],
    fy: [3, 4],
    lz: [14, 15, 16],
    jx: [17, 18, 19],
    jh: [20, 21, 22],
    yw: [23, 24],
    ls: [25, 26, 27],
    nb: [28, 29, 30, 31, 32, 33, 34, 35],
    qz: [37, 38],
    sx: [39, 40, 41],
    tz: [42, 43, 44],
    wz: [45, 46, 47, 48],
    zs: [49, 50, 51]
}

function add_station_id() {
    //清除二级下拉框的信息
    let idSelect = document.getElementById("station_id1");
    idSelect.innerText = ""

    //1.获取选择city的名字（value）
    let selectValue = document.getElementById("city1").value;

    //2.获取选择city对应的列表
    let idElement = city[selectValue];

    //3.获取到区县后的进行遍
    for (var i = 0; i < idElement.length; i++) {
        //4.获取当前元素封装成文本节点
        var text = document.createTextNode(idElement[i]);
        //5.创建option对象
        var option = document.createElement("option");
        //6.将区、县的数据添加到option标签对象中
        option.appendChild(text);
        //7.将option放到select标签中
        idSelect.appendChild(option);
    }
}

function add_station_id2() {
    //清除二级下拉框的信息
    let idSelect = document.getElementById("station_id2");
    idSelect.innerText = ""

    //1.获取选择city的名字（value）
    let selectValue = document.getElementById("city2").value;

    //2.获取选择city对应的列表
    let idElement = city[selectValue];

    //3.获取到区县后的进行遍
    for (var i = 0; i < idElement.length; i++) {
        //4.获取当前元素封装成文本节点
        var text = document.createTextNode(idElement[i]);
        //5.创建option对象
        var option = document.createElement("option");
        //6.将区、县的数据添加到option标签对象中
        option.appendChild(text);
        //7.将option放到select标签中
        idSelect.appendChild(option);
    }
}
function init() {
    //初始化方法，刷新页面时，自动选择第一个县区信息
    add_station_id();
}

$('#chaxun').click(function () {
    //获取用户选择的站点
    let myselect1 = document.getElementById("station_id1");
    let myselect2 = document.getElementById("station_id2");
    let index1 = myselect1.selectedIndex;// selectedIndex是所选中的项的index
    let index2 = myselect2.selectedIndex;// selectedIndex是所选中的项的index
    let selectedId1 = myselect1.options[index1].text;
    let selectedId2 = myselect2.options[index2].text;

    let selectedId = [];
    selectedId.push(parseInt(selectedId1), parseInt(selectedId2))

    //获取用户选择的时间
    let inputTime = document.getElementById("selectTime");//获取输入框元素
    let selectedTime = inputTime.value;

    $.ajax({
        url: "http://121.43.234.141:8080/getStationsInfo",
        type: "GET",
        data: {
            stationId: selectedId,
            time: selectedTime
        },
        dataType: "json",
        success: function (result) {
            console.log(result); //result为响应内容
            console.log(result[0]['cityName'], result[0]['stationId']);

            value_0 = [];
            value_1 = [];
            value_0.push(result[0]['aqi'], result[0]['co'], result[0]['no2'], result[0]['o3'], result[0]['pm10'],
                result[0]['pm25'], result[0]['so2'],);
            value_1.push(result[1]['aqi'], result[1]['co'], result[1]['no2'], result[1]['o3'], result[1]['pm10'],
                result[1]['pm25'], result[1]['so2'],);

            // 1.更新柱状图
            option_col = {
                title: {
                    // text: 'World Population'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    textStyle: {
                        color: '#fff',
                        fontSize: 14
                    }
                },
                grid: {
                    left: '2%',
                    right: '5%',
                    // bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01],
                    axisLabel: {
                        color: "#fff",
                        fontSize: "14"
                    },
                },
                yAxis: {
                    type: 'category',
                    data: legend_data,
                    axisLabel: {
                        color: "#fff",
                        fontSize: "14"
                    },
                },
                series: [
                    {
                        name: result[0]['cityName'].slice(0, 3) + ' id:' + result[0]['stationId'],
                        type: 'bar',
                        data: value_0
                    },
                    {
                        name: result[1]['cityName'].slice(0, 3) + ' id:' + result[1]['stationId'],
                        type: 'bar',
                        data: value_1
                    }
                ]
            };
            myCharts_col.setOption(option_col);


            //2.更新pie1
            option_pie1 = {
                title: {
                    text: result[0]['cityName'].slice(0, 3) + ' id:' + result[0]['stationId'],
                    textStyle: {
                        color: '#fff',
                        fontSize: 18
                    }
                },
                tooltip: {
                    trigger: 'item'
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                legend: {
                    top: '0%',
                    right: '10%',
                    orient: 'vertical',
                    // left: 'right',
                    top: 'center',
                    align: 'left',
                    textStyle: {
                        color: "rgba(255,255,255,.8)",
                        fontSize: 14
                    }
                },
                series: [
                    {
                        name: '传感器地区分布比例',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        center: ['40%', '50%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        labelLine: {
                            show: true
                        },
                        label: {
                            fontSize: 12,
                            fontWeight: 'bold',
                            color: '#fff',
                            formatter: '{b}\n{d}%',
                        },
                        data: [
                            { value: result[0]['aqi'], name: 'AQI' },
                            { value: result[0]['co'], name: 'CO' },
                            { value: result[0]['no2'], name: 'NO2' },
                            { value: result[0]['o3'], name: 'O3' },
                            { value: result[0]['pm10'], name: 'PM10' },
                            { value: result[0]['pm25'], name: 'PM2.5' },
                            { value: result[0]['so2'], name: 'SO2' },
                        ]

                    }
                ]
            };
            myCharts_pie1.setOption(option_pie1);

            //3.更新pie2
            option_pie2 = {
                title: {
                    text: result[1]['cityName'].slice(0, 3) + ' id:' + result[1]['stationId'],
                    textStyle: {
                        color: '#fff',
                        fontSize: 18
                    }
                },
                tooltip: {
                    trigger: 'item'
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                legend: {
                    top: '0%',
                    right: '10%',
                    orient: 'vertical',
                    // left: 'right',
                    top: 'center',
                    align: 'left',
                    textStyle: {
                        color: "rgba(255,255,255,.8)",
                        fontSize: 14
                    }
                },
                series: [
                    {
                        name: '传感器地区分布比例',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        center: ['40%', '50%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        labelLine: {
                            show: true
                        },
                        label: {
                            fontSize: 12,
                            fontWeight: 'bold',
                            color: '#fff',
                            formatter: '{b}\n{d}%',
                        },
                        data: [
                            { value: result[1]['aqi'], name: 'AQI' },
                            { value: result[1]['co'], name: 'CO' },
                            { value: result[1]['no2'], name: 'NO2' },
                            { value: result[1]['o3'], name: 'O3' },
                            { value: result[1]['pm10'], name: 'PM10' },
                            { value: result[1]['pm25'], name: 'PM2.5' },
                            { value: result[1]['so2'], name: 'SO2' },
                        ]

                    }
                ]
            };
            myCharts_pie2.setOption(option_pie2);
        },
        error: function () {
            console.log('Send Request Fail..');
        }
    });
});